<template>
  <div id="menuConfigCustomeruration">
    <el-card class="box-card">
      <!-- 头部 -->
      <template #header>
        <div class="card-header">
          <span>机构菜单配置</span>
        </div>
      </template>
      <!-- 按钮组 -->
      <el-row class="row-bg" justify="space-between">
        <el-col :span="12">
          <el-form-item class="el-form-item">
            <el-button type="primary" class="height40" @click="addCatalogue"
              >新增目录</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table
        :data="tableData"
        style="width: 100%; margin-bottom: 20px"
        row-key="id"
        border
      >
        <el-table-column prop="name" label="菜单名称" width="180">
          <template #="scope">
            <span>{{ scope.row.name }}</span>
            <span
              v-if="scope.row.platname"
              style="font-size: 12px; color: red"
              >{{ '(' + scope.row.platname + ')' }}</span
            >
          </template>
        </el-table-column>
        <!-- <el-table-column prop="name" label="菜单名称" width="200" /> -->
        <el-table-column prop="name" label="图标" align="center" width="100">
          <template #="scope">
            <svg-icon :icon-class="scope.row.icon" />
          </template>
        </el-table-column>
        <el-table-column prop="url" label="规则" />
        <el-table-column prop="parentId" label="父级">
          <template #="scope">
            <span v-show="scope.row.type == 1">
              {{ scope.row.parentId === 0 ? '顶级菜单' : '二级菜单' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路径" />
        <el-table-column prop="type" label="类型" align="center" width="100">
          <template #default="scope">
            <el-tag
              v-if="scope.row.type === 1 && !!scope.row.children"
              type="info"
              >目录</el-tag
            >
            <el-tag v-else-if="scope.row.type === 1" type="success"
              >菜单</el-tag
            >
            <el-tag v-else-if="scope.row.type === 2" type="warning"
              >按钮</el-tag
            >
          </template>
        </el-table-column>
        <el-table-column prop="permissions" label="权限按钮" />
        <el-table-column prop="date" label="操作" width="300">
          <template #default="scope">
            <div class="alitem">
              <div
                class="icon-button"
                v-if="scope.row.type === 1 && !!scope.row.children"
                @click="addMenu(scope.row, 1)"
              >
                <el-icon size="16" style="cursor: pointer">
                  <Plus />
                </el-icon>
                <span>新增菜单</span>
              </div>

              <div
                class="icon-button"
                v-else-if="scope.row.type === 1"
                @click="addMenu(scope.row, 2)"
              >
                <el-icon size="16" style="cursor: pointer">
                  <Plus />
                </el-icon>
                <span>新增按钮</span>
              </div>

              <div class="icon-button" @click="editCatalogue(scope.row, 3)">
                <el-icon size="16" style="cursor: pointer">
                  <EditPen />
                </el-icon>
                <span>编辑</span>
              </div>

              <div class="icon-button" @click="deleteInfo(scope.row)">
                <el-icon size="16" style="cursor: pointer">
                  <Delete />
                </el-icon>
                <span>删除</span>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
  <!-- 添加目录 -->
  <addCatalogueDialog
    ref="addCatalogueDialogRef"
    @getMenuConfig="getMenuConfig"
    :storeList="storeList"
  />
  <!-- 添加菜单 -->
  <addMenuDialog
    ref="addMenuDialogRef"
    @getMenuConfig="getMenuConfig"
    :storeList="storeList"
  />
  <!-- 添加功能 -->
</template>

<script setup>
import {
  menuConfigCustomer,
  customerMenuDel,
  getCustomerList,
} from '@/api/appv2/appv2';
import addCatalogueDialog from './module/addCatalogueDialog.vue';
import addMenuDialog from './module/addMenuDialog.vue';
import { ref } from 'vue';
const { proxy } = getCurrentInstance();
const tableData = ref([]);
const addCatalogueDialogRef = ref(null);
const addMenuDialogRef = ref(null);
const storeList = ref([]);
// 获取菜单列表
function getMenuConfig() {
  menuConfigCustomer().then((res) => {
    tableData.value = res.data;
  });
}
getMenuConfig();

// 新增目录
function addCatalogue() {
  addCatalogueDialogRef.value.openchange();
}
// 修改目录
function editCatalogue(val, type) {
  if (!!val.children) {
    addCatalogueDialogRef.value.openchange(val);
  } else {
    addMenuDialogRef.value.openchange(val, type);
  }
}
// 新增菜单
function addMenu(val, type) {
  addMenuDialogRef.value.openchange(val, type);
}

// 删除
function deleteInfo(val) {
  let countent = '';
  if (val.type == 1 && !!val.children) {
    countent = '是否需要删除该目录，及目录下的所有菜单和按钮';
  } else if (val.type == 1) {
    countent = '是否需要删除该菜单';
  } else if (val.type == 2) {
    countent = '是否需要删除该按钮';
  }

  proxy.$modal
    .confirm(countent)
    .then(function () {
      return customerMenuDel({
        id: val.id,
      });
    })
    .then((res) => {
      if (res.code === 20000) {
        proxy.$modal.msgSuccess('删除成功');
        getMenuConfig();
      }
    })
    .catch(() => {
      proxy.$modal.msg('取消删除');
    });
}
// 获取机构列表
const getStoreList = async () => {
  const { data } = await getCustomerList({
    page: 1,
    pageSize: 9999,
  });
  if (data.data.length) {
    data.data.unshift({ name: '机构共用', id: 0 });
    storeList.value = data.data;
  }
};
onMounted(() => {
  getStoreList();
});
</script>

<style lang="scss" scoped>
.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;

    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}

.row-bg {
  .el-form-item {
    margin: 10px 0 20px;
  }
}

.alitem {
  .icon-button {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 10px;
    /* 将光标设置为手型 */
    cursor: pointer;
  }
}
</style>
